<!-- views/Register.vue -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="用户登录">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link to="/zhuce" slot="right">注册</router-link>
    </mt-header>
    <!-- 表单组件 -->
    <mt-field
      type="text"
      label="用户名"
      v-model="name"
      :state="nameState"
      placeholder="请输入用户名"
      @blur.native.capture="checkName"
    />
    <mt-field
      type="password"
      label="密码"
      v-model="password"
      :state="pwdState"
      placeholder="请输入密码"
      @blur.native.capture="checkPwd"
    />
    <mt-button type="primary" size="large" @click="checkForm">
      快速登录
    </mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "", // 双向数据绑定 用户名输入框
      nameState: "", // 处理用户名输入框的状态的动态更新
      password: "",
      pwdState: "",
    };
  },
  methods: {
    checkName() {
      //处理点击按钮验证表单
      //单词字符大于6位小于16位
      let reg = /^[a-zA-Z0-9]{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
    // 验证密码
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.password)) {
        // 验证成功
        this.pwdState = "success";
        return true;
      } else {
        // 验证失败
        this.pwdState = "error";
        return false;
      }
    },

    checkForm() {
      // 事件处理函数，处理点击按钮验证表单
      //   this.checkName();
      //   this.checkPwd();
      //   this.checkRepwd();

      //短路语句
      if (this.checkName() && this.checkPwd()) {
        // console.log("验证成功,发送请,执行注册业务...");
        // console.log(this.name)
        this.axios
          .post("/denglu", `username=${this.name}&password=${this.password}`)
          .then((result) => {
            // console.log(result);
            if (result.data.code == 200) {
              //弹窗提示登录成功
              // this.$toast({
              //   message: "登录成功",
              //   position: "bottom",
              //   duration: 3000,
              // });
              // console.log("登录成功");
              //直接跳转到个人主页页面
              this.$router.push(`/personage?uname=${this.name}`);
            } else {
              // console.log("密码错误")
              // this.$toast({
              //   message: "登录失败,请重新登录",
              //   position: "bottom",
              //   duration: 3000,
              // });
            }
          });
      }
    },
  },
};
</script>
